<template>
  <div>
    <!-- el-table
             data:数据绑定
            el-table-column
                 prop:字段名
                 label:标题
           自定义栏
              el-table-column
                 默认的作用域插槽（{$index,row}）
                 $index:下标
                 row:当前行数据

     -->
    <el-table :data="list" border>
      <el-table-column type="index" label="序号" />
      <el-table-column label="序号">
        <template #default="{$index}">
          <div>
            {{ $index+1 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="生日" sortable width="100px" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column label="姓名">
        <template #default="{row}">
          <div>
            {{ row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" />
      <el-table-column label="操作">
        <template #default="{$index,row}">
          <div>
            {{ $index }}---{{ row }}
            <el-button type="success">分配权限</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="danger">删除</el-button>

          </div>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>
<style>
</style>
